<!--
 * @Description: 根据场景不同生成不同的元素
-->
<template>
    <div class="name-element-container">
        <!-- 正在上传 -->
        <template v-if="file.isUploading">
            <span class="filename">{{ file.filename }}</span>
        </template>
        <!-- 下载 -->
        <download-att
            v-else
            :file="file"
            class="download-att-wrapper"
        >
            <template v-if="isDoc">
                <span class="filename">{{ file.filename }}</span>
            </template>
            <template v-else>
                <span class="filename">{{ splitFileName.name }}</span>
                <span>{{ fileExt }}</span>
            </template>
        </download-att>
    </div>
</template>
<script>
    import DownloadAtt from './download-att';

    export default {
        name: 'NameElement',
        components: {
            DownloadAtt,
        },
        props: {
            file: {
                type: Object,
            },
        },
        computed: {
            // 是否是关联文档
            isDoc() {
                return (this.file.type.toString() === '2' || this.file.type.toString() === '4') && this.file.description;
            },
            splitFileName() {
                const { filename } = this.file;
                const index = filename.lastIndexOf('.');

                return {
                    name: filename.slice(0, index),
                    extension: filename.slice(index + 1),
                };
            },
            fileExt() {
                return `.${this.file.extension || this.splitFileName.extension}`;
            },
        },
        methods: {
            getFileName(fileName) {
                const index = fileName.lastIndexOf('.');

                return fileName.slice(0, index);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .name-element-container {
        display: flex;
        align-items: center;
        overflow: hidden;

        .filename {
            flex: 1;
            @include ellipsis;
        }

        > .download-att-wrapper {
            flex: 1;
        }
    }
</style>
